{% extends "_layouts/examples.html" %}
{% from "_macros/vf_blog.jinja" import vf_blog %}

{% block title %}Blog / Dynamic contents / 3 blocks{% endblock %}
{% block standalone_css %}patterns_all{% endblock %}

{% block content %}
{{ vf_blog(
  title={"text": "Latest from our blog"},
  template_config={"enabled": True, "layout": "3-blocks", "template_container_id": "articles-3-blocks"}
) }}

<script src="{{ versioned_static('build/js/modules/latest-news.js') }}"></script>
<script>
  canonicalLatestNews.fetchLatestNews({
    // Make sure you add `p-image-container__image` to ensure the article image receives the correct styling.
    imageClasses: ["p-image-container__image"],
    /*
      Make sure your article limit and `template_config.layout` match.
      Use "3-blocks" with `limit: "3"`.
     */
    limit: "3",
    articlesContainerSelector: "#articles-3-blocks",
    articleTemplateSelector: "#template",
    excerptLength: 180,
    gtmEventLabel: "Vanilla Blog pattern template example",
  })
</script>
{% endblock %}
